<template>
  <el-card>
    <el-button type="primary" class="changemessage">添加个人信息</el-button>
    <el-table :data="tableData" stripe style="width: 100%" border center>
      <el-table-column type="index" label="序号" width="60" center="true" />
      <el-table-column label="姓名" width="180">
        <template v-slot="{ row, $index }">
          <!-- 
                el-input元素一上来获取焦点
                  获取元素.focus()
               -->
          <el-input
            ref="input"
            size="small"
            v-if="row.isEdit"
            v-model="row.name"
            @blur="goShow(row, $index)"
            @keyup.enter="goShow(row, $index)"
          />
          <div v-else @click="goEdit(row)">{{ row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column label="借书名称">
        <template v-slot="{ row, $index }">
          <!-- 
                el-input元素一上来获取焦点
                  获取元素.focus()
               -->
          <el-input
            ref="input1"
            size="small"
            v-if="row.isEditAddress"
            v-model="row.address"
            @blur="goShowAddress(row, $index)"
            @keyup.enter="goShowAddress(row, $index)"
          />
          <div v-else @click="goEditAddress(row)">{{ row.address }}</div>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template v-slot="{ row, $index }">
          <!-- 
                el-input元素一上来获取焦点
                  获取元素.focus()
               -->
          <el-input
            ref="input2"
            size="small"
            v-if="row.isEditDate"
            v-model="row.date"
            @blur="goShowDate(row, $index)"
            @keyup.enter="goShowDate(row, $index)"
          />
          <div v-else @click="goEditDate(row)">{{ row.date }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-tooltip content="删除个人信息" placement="top" effect="light">
            <el-button size="small" type="danger" :icon="Delete" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'PersonCenter',
}
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ref, nextTick } from 'vue'

const tableData = [
  {
    date: '2016-05-03',
    name: '小明',
    address: '安徒生童话',
  },
  {
    date: '2016-05-02',
    name: '阿卷',
    address: '小丑鸭',
  },
  {
    date: '2016-05-04',
    name: '大聪明',
    address: '喜洋洋与灰太狼',
  },
  {
    date: '2016-05-01',
    name: 'admin',
    address: '我的理想',
  },
]
// 修改姓名
// 是否可编辑
const isEdit = ref(true)
const goShow = (row, index) => {
  row.isEdit = false
}
// 获取el-input元素
const input = ref()
const goEdit = async (row) => {
  row.isEdit = true
  // 需要输入框聚焦
  // 更新DOM元素是异步的
  // 应该等DOM更新完成，再去调用方法才能生效
  await nextTick()
  // 让显示这行数据中input聚焦
  input.value.focus()
}
// 修改借书名称
const isEditAddress = ref(true)
const goShowAddress = (row, index) => {
  row.isEditAddress = false
}
// 获取el-input元素
const input1 = ref()
const goEditAddress = async (row) => {
  row.isEditAddress = true
  // 需要输入框聚焦
  // 更新DOM元素是异步的
  // 应该等DOM更新完成，再去调用方法才能生效
  await nextTick()
  // 让显示这行数据中input聚焦
  input1.value.focus()
}
// 修改日期
const isEditDate = ref(true)
const goShowDate = (row, index) => {
  row.isEditDate = false
}
// 获取el-input元素
const input2 = ref()
const goEditDate = async (row) => {
  row.isEditDate = true
  // 需要输入框聚焦
  // 更新DOM元素是异步的
  // 应该等DOM更新完成，再去调用方法才能生效
  await nextTick()
  // 让显示这行数据中input聚焦
  input2.value.focus()
}
</script>

<style scoped>
.changemessage {
  margin-bottom: 20px;
}
</style>
